<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹灯</title>

    <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }

    body {
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background: #FFC0CB 浅粉色背景 */
    }

    .noselect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent
    }

    button {
        width: 150px;
        height: 50px;
        cursor: pointer;
        background: #FFC0CB; /* 按钮背景色 */
        border: none;
        border-radius: 10px;
        box-shadow: 0px 10px 25px #FFB6C1, 0px -10px 25px #FFF0F5, inset 0px -5px 10px #FFB6C1, inset 0px 5px 10px #FFF0F5;
        font-family: 'Damion', cursive;
        color: white;
        font-size: 20px;
        transition: 500ms
    }

    button:hover {
        border: 2px solid #FFC0CB; /* 鼠标悬停边框色 */
        animation: hueRotation 2s linear infinite
    }

    @keyframes hueRotation {
        to {
            filter: hue-rotate(360deg)
        }
    }

    button:focus {
        outline: none
    }
</style>
    </style>
</head>

<body>
    <button class="noselect">霓虹灯</button>
</body>

</html>